<template>
  <u-popup v-model="showoppen" mode="bottom" @close="close" border-radius="30">
    <view class="hgzbox" style="height: 660rpx">
      <view class="xsquy flex flex-ai-c flex-jc-sb">
        <view @click="close">取消</view>
        <view @click="clear">
          <i-icon
            class="pr-10"
            icon="iconlajitong"
            color="#999"
            size="34rpx"
          ></i-icon
          >清空
        </view>
      </view>
      <u-picker
        class="cheliquyu"
        style="margin-top: 70px !important"
        confirm-color="#38ACFF"
        :isShowCancel="false"
        mode="time"
        :params="params"
        v-model="showoppen"
        range-key="value"
        @confirm="confirmsc"
      ></u-picker>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'dateSelector',
  props: ['showsc'],
  data() {
    return {
      showoppen: false,
      dateIndex: '',
      params: { year: true, month: true },
    }
  },
  watch: {
    showsc(value) {
      this.showoppen = value
    },
  },
  methods: {
    // 点击确定调用函数
    confirmsc(e) {
      this.$emit('confirmTime', e.year + '-' + e.month)
    },

    // 遮罩层关闭时调用函数
    close() {
      this.$emit('closeTime')
    },

    clear() {
      this.$emit('confirmTime', '')
      this.$emit('closeTime')
    },
    bindChange(e) {
      // console.log(e)
    },
  },
}
</script>

<style lang="scss">
/deep/ uni-picker-view .uni-picker-view-wrapper {
  margin: 0 30rpx;
}
@mixin dingwei() {
  /* 定义flex容器 */
  display: flex;
  /*设置容器内部容器的排列方向*/
  flex-direction: row;
}

@mixin danhang1() {
  /* 单行...*/
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@mixin imgsize() {
  width: 100%;
  height: 100%;
}

@mixin colorbj() {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50rpx;
}

@mixin shuanghang2() {
  /* 两行...*/
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@mixin justify() {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.hgzbox {
  font-family: PingFang SC;
  font-weight: 500;
  text-align: center;

  .xsquy {
    font-size: 30rpx;
    color: #999;
    font-weight: 500;
    border-bottom: 2rpx solid #eeeeee;
    height: 88rpx;
    padding: 0 35rpx 0 50rpx;

    .pr-10 {
      padding-right: 10rpx;
    }
  }

  .quguo {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    margin-top: 21rpx;
  }

  .cityquxdz {
    width: 750rpx;
    height: 64rpx;
    background: rgba(241, 241, 241, 1);
    /* margin-top: 26rpx; */
    @include dingwei;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(146, 146, 146, 1);

    .shenfdz {
      width: 50%;
      line-height: 64rpx;
    }

    .shif {
      width: 50%;
      line-height: 64rpx;
    }
  }

  .cityqux {
    width: 750rpx;
    height: 64rpx;
    background: rgba(241, 241, 241, 1);
    margin-top: 26rpx;
    @include dingwei;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(146, 146, 146, 1);

    .shenf {
      width: 50%;
      line-height: 64rpx;
    }

    .shif {
      width: 50%;
      line-height: 64rpx;
    }
  }

  .hgztitle {
    border-bottom: 1px solid #eeeeee;
    line-height: 96rpx;
    font-size: 36rpx;
    color: rgba(51, 51, 51, 1);
  }

  .imgtexts {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    line-height: 96rpx;
    border-bottom: 1px solid #eeeeee;
  }

  .hgxz {
    line-height: 120rpx;
    font-size: 32rpx;
    color: rgba(102, 102, 102, 1);
  }

  .sucai {
    @include dingwei;
    border-bottom: 1px solid #eeeeee;

    .sucaitext {
      width: 50%;
      line-height: 120rpx;
      text-align: center;
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }
}

.cheliquyu {
  height: 500rpx;
  margin-top: 260rpx;

  /deep/ .u-mask-show {
    background-color: rgba(0, 0, 0, 0) !important;
    display: none;
  }

  /deep/ .u-picker-header {
    margin: 0 auto;
    padding: 0 42rpx;
  }

  /deep/ .u-btn-picker--primary {
    margin-top: 1090rpx;
    z-index: 99;
    width: 600rpx;
    height: 78rpx;
    background: #e2f3ff;
    border-radius: 12rpx;
    border: 3rpx solid #c1e5ff;
  }

  /deep/ .uni-picker-view-group .uni-picker-view-indicator {
    height: 80rpx;
    top: 50%;
    background: #f4f4f4;
    z-index: 0;
  }

  /deep/ .u-content {
    border-radius: 44rpx 0px 0px 44rpx !important;
  }

  /deep/ .u-drawer-content-visible {
    height: 666rpx !important;
  }
}
</style>
